<!DOCTYPE html>
<html l ang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id ="app"> 
        <!-- 4.使用组件 -->
        <my-com></my-com>
        <my-com></my-com>
        <my-com></my-com>
    </div>
    <!-- 1.定义模板 -->
    <template id="comTemplate">
       <div>
        {{ msg }} {{ reverse() }}
       </div> 
    </template>

    <script>
    
    // 2.定义组件
    const com = {
        template: '#comTemplate',
        data() {
            return {
                msg: 'Hello Components Code'
            }
        },
        methods: {
            reverse() {
                return this.msg.split('').reverse().join('');
            }
        }
    }

    // 3.全局注册组件
    // Vue.component('myCom',com);

    var app = new Vue({
        el: '#app',
        //3.局部注册组件
        components:{
            'myCom':com
        }
     });
    </script>
</body>

</html>